<template>
  <div>
    <Skeleton v-if="firstLoading" active :loading="loading" v-bind="skeletonProps"><slot /></Skeleton>
    <Spin v-else :spinning="loading" v-bind="spinProps"><slot /></Spin>
  </div>
</template>
<script lang="ts" setup>
import { Skeleton, Spin } from "ant-design-vue";
import type { SkeletonProps, SpinProps } from "ant-design-vue";
import { ref, watch } from "vue";

const props = defineProps<{
  loading: boolean;
  skeletonProps?: SkeletonProps;
  spinProps?: SpinProps;
}>();
const firstLoading = ref(true);
watch(
  () => props.loading,
  (v) => {
    if (!v) {
      firstLoading.value = false;
    }
  }
);
</script>
